<template>
	<view >
		<cu-custom bgColor="bg-gradual-blue" :isBack="true"><block slot="backText">返回</block><block slot="content">KR详情</block></cu-custom>
		<view class="">
		    <view class="title cu-form-group" style="font-size: 20px;">{{kr.name}}</view>
		    <view class="bg-white" style="padding-left: 15px;">
		    	进度：{{kr.progress}}%
		    </view>
		</view>
		 <scroll-view scroll-x class="bg-white nav" scroll-with-animation :scroll-left="scrollLeft">
		    <view class="propertyBox">
		      <view class="cu-item" :class="index == TabCur ? 'text-green cur' : ''" v-for="(item, index) in modules" :key="index" @tap="tabSelect" :data-id="index">
		        {{ item.name }}
		      </view>
		    </view>
		  </scroll-view>
		  
			<view class="parent-container" >
				<view class="" style="margin-bottom: 30px;">
					<!-- 任务 -->
					<view class="" v-show="TabCur == 0">
						<button class="cuIcon-add margin" style="color: blue;margin-bottom: unset;" @click="addTask">添加任务</button>
						<view class="content" style="background-color: whitesmoke;padding: 1rpx 10rpx;" v-for="c in taskList" >
							<view class="bg-white" v-show="taskList" @tap="taskDetail(c)" style="margin-top: 10px;">
								<checkbox :class="c.states?'checked':''" value="c.states" :checked="c.states" color="#FFCC33" style="transform:scale(0.7);  margin-left: 7px;"/> 
								<text :class="{ 'strikethrough': c.states } "  :key="c.id" style="border: 10px;background-color: white;font-size: 14px;padding-top: 10rpx;" >
									{{c.taskName}}
								</text>
								<view class="margin-left" style="padding-bottom: 15rpx;font-size: 12px;">
									负责人：{{c.staff.name}}，结束时间：{{c.endTime}}
								</view>
							</view>
						</view>
					</view>
					
					
					<!-- 记录 -->
					<view class="cu-form-group bottom-view" v-if="renewList != null" v-for="e in renewList" @click="delRenew(e)" v-show="TabCur == 1" >
					   <view class="container" style="margin: 8px;">
						  <view class="avatar-container">
							<image :src="e.avatar" class="avatar"></image>
						  </view>
						  <view class="right-content">
							<view class="comment-name">{{ e.staffName }}，{{ e.creatTime }}</view>
							<view class="comment-content">{{ e.content }}</view>
						  </view>
						</view>
					</view>
				</view>
			</view>
		<!-- 底部输入框，用来评价当前任务 -->
		  <view class="flex-container bg-white">
			<input
			  type="text"
			  v-model="commentMessage"
			  placeholder="请输入消息"
			  class="flex-item input-box"
			  @focus="keyboardVisible = true"
			  @blur="keyboardVisible = false"
			/>
			<button class="flex-item send-button" @click="sendMessage"  style="font-size: 13px;">发送</button>
		  </view>
	</view>
</template>

<script>
	import request from '../../common/request';
	import common from 'common/common.js';
	export default {
		data() {
			return {
				
				isStrikethrough: false,
				
				commentMessage: '', // 用户输入的消息
				keyboardVisible: false, // 是否显示键盘
				
				// 滑动导航栏
				TabCur: 0,
				scrollLeft: 0,
				
				modules:[
					{"name": "任务"},
					{"name": "记录"},
				],
				kr:{},
				staff:{},
				krId:'',
				renewList:[],
				taskList:[],
				chengeTaskStates:{},
				renew:{},
			}
		},
		onLoad(options) {
			// this.kr = JSON.parse(decodeURIComponent(options.kr));
			this.krId = options.krId;
			this.staff = uni.getStorageSync("staff"); 
			this.getKrDetailById();
		},
		onShow() {
			uni.removeStorageSync("ids");
			uni.removeStorageSync("leader");
			this.getKrDetailById();
		},
		methods: {
			delRenew(renew){
				var _this = this;
				uni.showModal({
				    title: '删除记录',
				    content: '您确定要删除这条记录吗？',
				    success: function (res) {
				        if (res.confirm) {
							request({
								url: common.api_base_url+'/renew/' + renew.id,
								data:{
								},
								method: 'DELETE',
								success: res => {
									_this.getKrDetailById();
								},
								fail: function(e) {
									uni.showToast({
										title:"唉哟，程序错误了["+JSON.stringify(e)+"]",
										icon:"loading"
									})
								},
							});
				        } else if (res.cancel) {
							res.cancel = true;
				        }
				    }
				});
			},
			// 评论框发送
			 sendMessage() {
			  if (this.commentMessage.trim() !== '') {
				  this.renew.okrId = this.kr.id;
				  this.renew.parentId = this.kr.parentId;
				  this.renew.content = "对"+ this.kr.name + "评论："+ this.commentMessage;
				  this.renew.avatar = this.staff.avatar;
				  this.renew.staffName = this.staff.name;
				  this.renew.staffId = this.staff.id;
					var _this = this;
					request({
						url: common.api_base_url+'/renew',
						data:{
							"renew":_this.renew,
						},
						header:{
						},
						method: 'PUT',
						success: res => {
							_this.getKrDetailById();
						},
						fail: function(e) {
							uni.showToast({
								title:"唉哟，程序错误了["+JSON.stringify(e)+"]",
								icon:"loading"
							})
						},
					});
				// 清空输入框
				this.commentMessage = '';
			  } else{
				  uni.showToast({
				  	title:"内容不能为空",
				  	icon:"error"
				  })
			  }
			},
			
			// 添加任务
			addTask(){
				this.kr.renewList = [];
				uni.navigateTo({
					// url:'/pages/addTask/addTask?krId=${task.id}`,
					url:'/pages/addTask/addTask?oldKr='+ encodeURIComponent(JSON.stringify(this.kr)),
				})
			},
			// 点击获取任务详情
			taskDetail(task){
				uni.navigateTo({
					// url: `/pages/showList/taskDetail?taskId=${task.id}`,
					url:'/pages/showList/taskDetail?task='+ encodeURIComponent(JSON.stringify(task)),
				})
			},
			// 任务完成勾选框
			// completeTask(task){
			// 	if(task.states){
			// 		uni.showToast({
			// 			title:"重启任务",
			// 			icon:"success"
			// 		})
			// 	}else{
			// 		uni.showToast({
			// 			title:"完成任务",
			// 			icon:"success"
			// 		})
			// 	}
			// 	this.task = {
			// 		id: task.id,
			// 		states: !task.states
			// 	}
			// 	var _this = this;
			// 	uni.request({
			// 		url: common.api_base_url+'/task/changeStates',
			// 		data:{
			// 			"task": _this.task
			// 		},
			// 		header:{
			// 		},
			// 		method: 'PUT',
			// 		success: res => {
			// 			if(res.data.success){
			// 				_this.getKrDetailById();
							
			// 			} else {
			// 				uni.showToast({
			// 					title: res.data.message,
			// 					duration: 2000,
			// 					icon:"error"
			// 				})
			// 			}
			// 		},
			// 		fail: function(e) {
			// 			uni.showToast({
			// 				title:"唉哟，程序错误了["+JSON.stringify(e)+"]",
			// 				icon:"loading"
			// 			})
			// 		},
			// 	});
			// },
			//  滑动导航栏选择按钮
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60;
				if(this.TabCur == 0){
					// 显示下面的任务
				} else{
					// 显示下面的记录
				}
			},
			getKrDetailById(){
				var _this = this;
				request({
					url: common.api_base_url+'/okr/getKrDetailById/' + _this.krId,
					data:{
					},
					method: 'GET',
					success: res => {
						_this.kr = res.data;
						_this.renewList = _this.kr.renewList;
						_this.renewList.reverse();
						_this.taskList = _this.kr.taskList;
					},
					fail: function(e) {
						uni.showToast({
							title:"唉哟，程序错误了["+JSON.stringify(e)+"]",
							icon:"loading"
						})
					},
				});
			},
		}
	}
</script>

<style>
/* 导航栏固定一行 */
.propertyBox{
		flex-flow: row;
		justify-content: flex-start;
		display: flex;
	}
/* .propertyBox {
  display: flex;
} */

.cu-item {
	text-align: center;
  flex: 1; /* 设置每个元素的宽度为50% */
}
/* 记录css */

.container {
  display: flex;
  align-items: center; /* 垂直居中对齐容器内的内容 */
}

.avatar-container {
  /* 图片容器垂直居中 */
  display: flex;
  justify-content: center; /* 水平居中对齐 */
  align-items: center; /* 垂直居中对齐 */
  margin-right: 10px; /* 可根据需要调整右边距 */
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.right-content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.comment-name {
  font-weight: bold;
}


/* 最下面评论框样式 */
.send-button {
  background-color: #007bff;
  color: white;
  border: none;
  cursor: pointer;
  line-height: 25px;
  white-space: nowrap;
}

.flex-item {
  border: 1px solid #ccc;
  margin: 5px;
  height: 25px; /* 设置元素的高度 */
}

.flex-container {
  display: flex;
  flex-direction: row; /* 垂直居中对齐 */
  position: fixed;
  bottom: 0;
  left: 0; /* 如果需要指定水平位置，可以根据需求调整 */
  width: 100%; /* 让元素铺满屏幕宽度 */
  background-color: #fff; /* 背景颜色，根据需求自行调整 */
  z-index: 999; /* 可选，用于控制元素的层叠顺序 */
}

.input-box {
 width: 90%;
}

/* cs */
.my-fixed-bottom-element {
  position: fixed;
  bottom: 0;
  left: 0; /* 如果需要指定水平位置，可以根据需求调整 */
  width: 100%; /* 让元素铺满屏幕宽度 */
  background-color: #fff; /* 背景颜色，根据需求自行调整 */
  z-index: 999; /* 可选，用于控制元素的层叠顺序 */
}

.parent-container {
	   display: flex;
	    flex-direction: column;
	  /* 其他Grid属性 */
	}
	
	.strikethrough {
	  text-decoration: line-through;
	  color: #666;
	}
</style>
